<template>
  <el-container>
    <el-header style="margin-top: 40px;">
      <el-row>
        <el-col :span="1">
          <el-button @click="dialog.create.display = true" type="primary" icon="el-icon-plus">添加</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        v-loading="page.loading"
        :data="table.data"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          sortable
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          sortable
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          sortable
          prop="username"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="introduction"
          label="描述">
        </el-table-column>
         <el-table-column
          prop="phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="activated"
          label="激活">
           <template slot-scope="scope">
            {{scope.row.activated ? "已激活" :"未激活"}}
          </template>
        </el-table-column>
        <el-table-column
          prop="avatar"
          label="头像">
          <template slot-scope="scope">
            <el-avatar shape="square" :src="scope.row.avatar" fit="contain"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="button"
          label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="update(scope.row)" type="primary" icon="el-icon-edit"></el-button>
              <el-button @click="remove(scope.row)" type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="load"
        layout="prev, pager, next"
        :total="table.total"
        :page-size="table.size"
        :current-page="table.page">
      </el-pagination>
    </el-main>

    <el-dialog
      :close-on-click-modal="false"
      title="添加用户"
      :visible.sync="dialog.create.display"
      width="30%">
      <span>
        <el-form label-position="top" ref="user-create" :model="user">
          <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
            <el-input type="password" v-model="user.password"></el-input>
          </el-form-item>
          
          <el-form-item label="角色" prop="roles" :rules="[{ required: true, message: '请选择角色', trigger: 'change' }]">
            <el-checkbox-group v-model="user.roles">
              <el-checkbox v-for="item in roles" :key="item.id" :label="item.id">
                {{item.introduction}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.create.display = false">取 消</el-button>
        <el-button type="primary" @click="create">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="用户修改"
      :visible.sync="dialog.update.display"
      width="30%">
      <span>
        <el-form label-position="top" :model="user" ref="user-update">
          <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入所属公司', trigger: 'blur' }]">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="用户描述" prop="introduction" :rules="[{ required: true, message: '请输入用户描述', trigger: 'blur' }]">
            <el-input v-model="user.introduction"></el-input>
          </el-form-item>
          <el-form-item label="是否锁定" prop="lock" :rules="[{ required: true, message: '请选择是否锁定', trigger: 'change' }]">
            <el-radio v-model="user.lock" :label="true">锁定</el-radio>
            <el-radio v-model="user.lock" :label="false">不锁定</el-radio>
          </el-form-item>
          <el-form-item label="是否激活" prop="activated" :rules="[{ required: true, message: '请选择是否激活-激活后可看网站所有博客', trigger: 'change' }]">
            <el-radio v-model="user.activated" :label="true">激活</el-radio>
            <el-radio v-model="user.activated" :label="false">不激活</el-radio>
          </el-form-item>
          <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
            <el-input type="password" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="roles" :rules="[{ required: true, message: '请选择角色', trigger: 'change' }]">
            <el-checkbox-group v-model="user.roles">
              <el-checkbox v-for="item in roles" :key="item.id" :label="item.id">
                {{item.introduction}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.update.display = false">取 消</el-button>
        <el-button type="primary" @click="update_">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import {user, create, roles, update, remove, page} from '@/api/user'

export default {
  name: "User",
  data () {
    return {
      table: {
        data: null,
        page: 1,
        size: 10,
        total: null
      },
      page: {
        loading: true
      },
      dialog: {
        create: {
          display: false
        },
        update: {
          display: false
        }
      },
      user: {
        id: null,
        name: null,
        username: null,
        password: null,
        introduction: null,
        lock: false,
        roles: []
      },
      roles: []
    }
  },
  methods: {
    update (row) {
      this.user = JSON.parse(JSON.stringify(row))
      this.dialog.update.display = true
    },
    update_ () {
      this.$refs['user-update'].validate((valid) => {
        if (valid) {
          update(this.user).then( res => {
            this.load()
            this.user = {
              id: null,
              name: null,
              username: null,
              introduction: null,
              roles: []
            }
            this.dialog.update.display = false
          })
        }
      });
    },
    remove (row) {
      this.$confirm('您是否确认删除该用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then( res => {
          this.load()
        })
      })
    },
    create () {
      this.$refs['user-create'].validate((valid) => {
        if (valid) {
          create(this.user).then( res => {
            this.user = {
              id: null,
              name: null,
              username: null,
              password: null,
              introduction: null,
              lock: false,
              roles: []
            }
            this.dialog.create.display = false;
            this.load()
          })
        }
      });
    },
    load (_page) {
      this.page.loading = true
      let _current = 1
      if (_page === undefined)
        _current = this.table.page;
      else
        _current = _page
      user({ page: _current, size: this.table.size }).then( res => {
        let { list, count } = res.data
        this.table.data = []
        this.table.data = list
        this.table.total = count
        this.page.loading = false
      }).catch( err => {
        console.log(err)
        this.page.loading = false
      })
    }
  },
  mounted() {
    roles().then( res => {
      this.roles = res.data.list
    })
    this.load()
  }
}
</script>

<style scoped>

</style>
